<template>
	<view :style="{ height: globalData.statusBarHeight + globalData.navBarHeight + 'px' }">

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const globalData = ref({
		navBarHeight: 0,
		statusBarHeight: 0,
	},)
	// 适配小程序导航栏高度
	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync();
	let navBarHeight = 0;

	// 计算胶囊
	// #ifdef MP-WEIXIN || MP-TOUTIAO
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	navBarHeight =
		(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height;
	// #endif

	// #ifndef MP-WEIXIN && !MP-TOUTIAO
	// 其他平台默认44px
	navBarHeight = 44;
	// #endif

	// 存储到全局
	globalData.value.navBarHeight = navBarHeight;
	globalData.value.statusBarHeight = systemInfo.statusBarHeight;

	// 注入CSS变量（H5生效）
	// #ifdef H5
	document.documentElement.style.setProperty("--nav-height", `${navBarHeight}px`);
	document.documentElement.style.setProperty(
		"--status-bar-height",
		`${systemInfo.statusBarHeight}px`
	);

	// #endif
</script>

<style scoped></style>